'use client'
import React, { useState, useEffect } from 'react'
import Image from 'next/image'
import { Skeleton, Alert, Empty } from 'antd'
import { useRouter } from 'next/navigation'

import { userCenterGet7 } from '@/apis'

// 定义接口返回的数据结构
interface ItemPoint {
  id: number
  itemName: string
  itemContent: string
}
export default function Pdp() {
  const router = useRouter()
  const [itemPointList, setItemPointList] = useState<ItemPoint[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  // 获取检测项点数据
  const fetchItemPoints = async () => {
    setLoading(true)
    setError(null)
    try {
      const params = {
        page: 1,
        size: 8,
      }
      console.log('请求参数:', params)
      const queryString = new URLSearchParams(
        Object.entries(params).reduce((acc, [key, value]) => {
          if (value !== undefined) acc[key] = String(value)
          return acc
        }, {} as Record<string, string>),
      ).toString()
      const response = await userCenterGet7({
        url: `/user_center/item_point?${queryString}`,
        baseURL: '/api/proxy',
      })
      setItemPointList(response?.data?.data.data || [])
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
    } catch (err) {
      setError('网络异常，无法加载检测项点数据')
    } finally {
      setLoading(false)
    }
  }

  // 组件加载时获取数据
  useEffect(() => {
    fetchItemPoints()
  }, [])

  // 渲染单个检测项
  const renderItemPoint = (item: ItemPoint) => {
    return (
      <div
        key={item.id}
        className="bg-white shadow-md flex flex-col items-center justify-center"
      >
        <h3 className="w-full text-lg font-bold mb-2 text-center text-[#000] p-4 bg-[url('/images/hotTitleBg.png')] bg-no-repeat bg-cover">
          {item.itemName || '未命名'}
        </h3>
        <p className="text-[#606F85] p-6 leading-6">
          {item.itemContent || '暂无描述'}
        </p>
      </div>
    )
  }

  // 渲染网格
  const renderItemPointList = () => {
    if (loading) {
      return Array(8)
        .fill(0)
        .map((_, idx) => (
          <div
            key={idx}
            className="bg-white shadow-md flex flex-col items-center justify-center"
          >
            <Skeleton active paragraph={{ rows: 1 }} className="w-full p-4" />
            <Skeleton active paragraph={{ rows: 2 }} className="p-6" />
          </div>
        ))
    }

    if (error) {
      return (
        <div className="col-span-full flex justify-center items-center py-10">
          <Alert message={error} type="error" showIcon />
        </div>
      )
    }

    if (itemPointList.length === 0) {
      return (
        <div className="col-span-full flex justify-center items-center py-10">
          <Empty description="暂无检测项点内容" />
        </div>
      )
    }

    return itemPointList.map(renderItemPoint)
  }

  return (
    <section>
      <div className="container mx-auto flex flex-col mt-2 md:flex-col items-center justify-between h-full">
        <div className="w-full flex justify-between my-2">
          <div className="flex flex-row items-center justify-start gap-2">
            <Image
              src="/images/hotIcon02.png"
              alt="Logo"
              width={20}
              height={20}
              className="object-cover w-[20px] h-[20px] rounded-lg"
            />
            <span className="text-lg font-bold text-[#202020]">检测项点</span>
          </div>
          <span
            className="text-sm flex flex-row text-[#2570FF] cursor-pointer hover:underline"
            onClick={() => {
              router.push('/inspection')
            }}
          >
            更多&gt;&gt;
          </span>
        </div>
        <div className="w-full grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          {renderItemPointList()}
        </div>
      </div>
    </section>
  )
}
